<template>
  <div>
    <ul v-for="Item in peopless" :key="Item" style="width: 35%">
      <li style="width: 60%" v-if="Item != null">
        用户名：{{ Item.name }}，用户频道{{ Item.aisle }}
      </li>
    </ul>
    <el-row :gutter="20">
      <el-col :span="12" :offset="6">
        <div class="main">
          <el-row>
            <el-input
              placeholder="请输入自己的昵称"
              prefix-icon="el-icon-user-solid"
              v-model="name"
              style="width: 50%"
            ></el-input>
            <el-button type="primary" @click="conectWebSocket()"
              >建立连接</el-button
            >
            <el-button type="danger" @click="closeWebSocket()"
              >断开连接</el-button
            >
          </el-row>
          <el-row>
            <el-input
              placeholder="请输入对方频道号"
              prefix-icon="el-icon-phone"
              v-model="aisle"
              style="width: 40%"
            ></el-input>
          </el-row>
          <el-row>
            <el-input
              placeholder="请输入要发送的消息"
              prefix-icon="el-icon-s-promotion"
              v-model="messageValue"
              style="width: 50%"
            ></el-input>
            <el-button type="primary" @click="sendMessage()">发送</el-button>
          </el-row>
          <div class="message">
            <div v-for="(value, key, index) in messageList" :key="index">
              <el-tag
                v-if="value.name == name"
                type="success"
                style="float: right"
                >我：{{ value.msg }}</el-tag
              >
              <br />
              <el-tag v-if="value.name != name" style="float: left"
                >{{ value.name }}：{{ value.msg }}</el-tag
              >
              <br />
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
   
  <script>
import vuex from "../../store/index.js";
export default {
  name: "KeFu",
  data() {
    return {
      name: "", // 昵称
      websocket: null, // WebSocket对象
      aisle: "", // 对方频道号
      messageList: [], // 消息列表
      messageValue: "", // 消息内容
      peopless: [], //在线人数组
      i: 0,
    };
  },
  // created(){
  //   this.peopless=new Array(5)

  //   for(var y=0;y<5;y++){
  //     this.peopless.pop()
  //   }
  //   localStorage.setItem('peoples',JSON.stringify(this.peopless))
  //   this.init()
  // },
  methods: {
    closeWebSocket() {
      if (this.websocket == null) {
        alert("没有可断链");
        this.init();
      } else {
        this.websocket.close();
        this.peopless.shift();
        console.log(this.peopless);
        localStorage.setItem("peoples", JSON.stringify(this.peopless));
        this.init();
        this.$notify({
          title: "断开连接",
        });
      }
    },

    init() {
      this.peopless = JSON.parse(localStorage.getItem("peoples"));
    },

    conectWebSocket: function () {
      console.log("建立连接");
      if (this.name === "") {
        this.$alert("请输入自己的昵称", "提示", {
          confirmButtonText: "确定",
          callback: (action) => {},
        });
      } else {
        //判断当前浏览器是否支持WebSocket
        if ("WebSocket" in window) {
          this.websocket = new WebSocket(
            "ws://101.33.228.125:8777/websocket/" + this.name
          );
        } else {
          alert("不支持建立socket连接");
        }
        //连接发生错误的回调方法
        this.websocket.onerror = function () {};
        //连接成功建立的回调方法
        this.websocket.onopen = function (event) {};
        //接收到消息的回调方法
        var that = this;
        this.websocket.onmessage = function (event) {
          var object = eval("(" + event.data + ")");
          console.log(object);
          if (object.type == 0) {
            // 提示连接成功
            console.log("连接成功");
            if (that.peopless) {
              var p = JSON.parse(localStorage.getItem("peoples"));
              console.log(p);

              that.peopless.unshift(object);
              var o = that.peopless.concat(p);

              that.peopless = that.unique(o);
              localStorage.setItem("peoples", JSON.stringify(that.peopless));
            } else {
              that.peopless = new Array(5);
              that.peopless[0] = object;
              for (var y = 0; y < 4; y++) {
                that.peopless.pop();
              }

              var p = JSON.parse(localStorage.getItem("peoples"));
              console.log(p);
              that.peopless.push(p);
              localStorage.setItem("peoples", JSON.stringify(that.peopless));
            }

            // vuex.commit('peoples',object)
            that.init();
            // console.log(event.data);
            that.showInfo(object.people, object.aisle);
          }
          if (object.type == 1) {
            //显示消息
            console.log("接受消息");
            that.messageList.push(object);
          }
        };
        //连接关闭的回调方法
        this.websocket.onclose = function () {};
        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = function (e) {
          this.websocket.close();
          this.peopless.shift();
          console.log(this.peopless);
          localStorage.setItem("peoples", JSON.stringify(this.peopless));
          this.init();
          this.$notify({
            title: "断开连接",
          });
        };
      }
    },
    // 发送消息
    sendMessage: function () {
      var socketMsg = { msg: this.messageValue, toUser: this.aisle };
      if (this.aisle == "") {
        //群聊.
        socketMsg.type = 0;
      } else {
        //单聊.
        socketMsg.type = 1;
      }
      this.websocket.send(JSON.stringify(socketMsg));
    },
    windoclose() {
      this.peopless.shift();
      console.log(this.peopless);
      localStorage.setItem("peoples", JSON.stringify(this.peopless));
      this.init();
      this.$notify({
        title: "断开连接",
      });
    },
    showInfo: function (people, aisle) {
      this.$notify({
        // title: "当前在线人数：" + (people-2),
        message: "您的频道号：" + aisle,
      });
    },
    unique(o) {
      const res = new Map();
      return o.filter((o) => !res.has(o.aisle) && res.set(o.aisle, 1));
    },
  },
  mounted() {
    if (this.peopless != undefined) {
      window.addEventListener("beforeunload", (e) => this.windoclose());
    } else {
      this.peopless = new Array(5);

      for (var y = 0; y < 5; y++) {
        this.peopless.pop();
      }
      localStorage.setItem("peoples", JSON.stringify(this.peopless));
      this.init();
      // this.windoclose()
      window.addEventListener("beforeunload", (e) => this.windoclose());
    }
  },
  updated() {
    window.addEventListener("storage", (e) => {
      this.init();
    });
  },
};
</script>
   
  <style scoped>
.main {
  position: relative;
  top: 20px;
}
.message {
  position: relative;
  overflow: auto;
  top: 20px;
  width: 100%;
  height: 400px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  padding: 5px;
}
.el-row {
  width: 100%;
}
</style>
  